<template>
  <div class="home">
    <!-- 轮播图 -->
    <mt-swipe :auto="2000">
      <mt-swipe-item>
        <router-link to>
          <img src="../assets/images/banner1.png" alt>
        </router-link>
      </mt-swipe-item>
      <mt-swipe-item>
        <router-link to>
          <img src="../assets/images/banner2.png" alt>
        </router-link>
      </mt-swipe-item>
      <mt-swipe-item>
        <router-link to>
          <img src="../assets/images/banner3.png" alt>
        </router-link>
      </mt-swipe-item>
      <mt-swipe-item>
        <router-link to>
          <img src="../assets/images/banner4.png" alt>
        </router-link>
      </mt-swipe-item>
      <mt-swipe-item>
        <router-link to>
          <img src="../assets/images/banner5.png" alt>
        </router-link>
      </mt-swipe-item>
      <mt-swipe-item>
        <router-link to>
          <img src="../assets/images/banner2.png" alt>
        </router-link>
      </mt-swipe-item>
    </mt-swipe>
    <!-- 导航模块 -->
    <ul class="nav clearfix">
      <li>
        <router-link to>
          <img src="../assets/images/nav1.png" alt>
        </router-link>
      </li>
      <li>
        <router-link to>
          <img src="../assets/images/nav2.png" alt>
        </router-link>
      </li>
      <li>
        <router-link to>
          <img src="../assets/images/nav3.png" alt>
        </router-link>
      </li>
      <li>
        <router-link to>
          <img src="../assets/images/nav4.png" alt>
        </router-link>
      </li>
      <li>
        <router-link to>
          <img src="../assets/images/nav5.png" alt>
        </router-link>
      </li>
      <li>
        <router-link to>
          <img src="../assets/images/nav2.png" alt>
        </router-link>
      </li>
    </ul>
    // 产品模块
    <div class="productList">
      <router-link to class="probox">
        <img src="../assets/images/product.jpg" alt>
        <div class="lt_prodesc">所以我们需要重置样式：样式名称不要猜，而是检查元素去查找对应的样式名称</div>
        <div class="lt_proprice">
          <span>￥200.00</span>
          <span>￥300.00</span>
        </div>
        <mt-button type="primary">立即购买</mt-button>
      </router-link>
      <router-link to class="probox">
        <img src="../assets/images/product.jpg" alt>
        <div class="lt_prodesc">所以我们需要重置样式：样式名称不要猜，而是检查元素去查找对应的样式名称</div>
        <div class="lt_proprice">
          <span>￥200.00</span>
          <span>￥300.00</span>
        </div>
        <mt-button type="primary">立即购买</mt-button>
      </router-link>
      <router-link to class="probox">
        <img src="../assets/images/product.jpg" alt>
        <div class="lt_prodesc">所以我们需要重置样式：样式名称不要猜，而是检查元素去查找对应的样式名称</div>
        <div class="lt_proprice">
          <span>￥200.00</span>
          <span>￥300.00</span>
        </div>
        <mt-button type="primary">立即购买</mt-button>
      </router-link>
      <router-link to class="probox">
        <img src="../assets/images/product.jpg" alt>
        <div class="lt_prodesc">所以我们需要重置样式：样式名称不要猜，而是检查元素去查找对应的样式名称</div>
        <div class="lt_proprice">
          <span>￥200.00</span>
          <span>￥300.00</span>
        </div>
        <mt-button type="primary">立即购买</mt-button>
      </router-link>
      <router-link to class="probox">
        <img src="../assets/images/product.jpg" alt>
        <div class="lt_prodesc">所以我们需要重置样式：样式名称不要猜，而是检查元素去查找对应的样式名称</div>
        <div class="lt_proprice">
          <span>￥200.00</span>
          <span>￥300.00</span>
        </div>
        <mt-button type="primary">立即购买</mt-button>
      </router-link>
      <router-link to class="probox">
        <img src="../assets/images/product.jpg" alt>
        <div class="lt_prodesc">所以我们需要重置样式：样式名称不要猜，而是检查元素去查找对应的样式名称</div>
        <div class="lt_proprice">
          <span>￥200.00</span>
          <span>￥300.00</span>
        </div>
        <mt-button type="primary">立即购买</mt-button>
      </router-link>
    </div>
  </div>
</template>
<script>
export default {}
</script>
<style lang="scss">
.home {
  overflow: scroll;
}
.mint-swipe {
  height: 230px;
  img {
    width: 100%;
    display: block;
  }
}
.nav {
  padding: 10px;
  > li {
    width: 33.3%;
    float: left;
    img {
      width: 100%;
      display: block;
    }
  }
}
.productList {
  padding: 10px;
  .probox {
    margin-top: 10px;
    padding-bottom: 10px;
    width: 49%;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 2px 0px #ddd;
    float: left;
    text-decoration: none;
    img {
      width: 100%;
      display: block;
    }
    .lt_prodesc {
      color: #666;
      font-size: 13px;
      padding: 0px 5px;
      display: -webkit-box;
      overflow: hidden;
      white-space: normal !important;
      text-overflow: ellipsis;
      word-wrap: break-word;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .lt_proprice {
      margin: 5px 0;
      > span {
        color: #000;
        font-size: 13px;
      }
      > span:nth-of-type(1) {
        color: red;
        font-size: 13px;
        margin-right: 10px;
      }
    }
    .mint-button {
      display: block;
      margin: 0 auto;
      font-size: 15px;
      height: auto;
      padding: 5px 15px;
    }
  }
  .probox:nth-of-type(even) {
    margin-left: 2%;
  }
}
</style>
